<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8">
		<title>Example 08.06 - Load OBJ model </title>
		<script type="text/javascript" src="lib/three.js"></script>
		<script type="text/javascript" src="loaders/OBJLoader.js"></script>
		<script type="text/javascript" src="file_list.js"></script>
		<style>
			body,
			html {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>

	<body>

		<canvas id="scene"></canvas>

		<script type="text/javascript">
			/* http://mamboleoo.be/learnThree/ */
			var renderer, scene, camera, banana;

			var ww = window.innerWidth,
				wh = window.innerHeight;

			function init() {

				renderer = new THREE.WebGLRenderer({
					canvas: document.getElementById('scene')
				});
				renderer.setSize(ww, wh);

				scene = new THREE.Scene();

				camera = new THREE.PerspectiveCamera(50, ww / wh, 0.1, 10000);
				camera.position.set(0, 0, 1500);
				scene.add(camera);

				//Add a light in the scene
				directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
				directionalLight.position.set(0, 0, 350);
				directionalLight.lookAt(new THREE.Vector3(0, 0, 0));
				scene.add(directionalLight);

				//Load the obj file
				loadOBJ();
			}

			var loadOBJ = function() {

				//Manager from ThreeJs to track a loader and its status
				var manager = new THREE.LoadingManager();
				//Loader for Obj from Three.js
				var loader = new THREE.OBJLoader(manager);
				//Launch loading of the obj file, addBananaInScene is the callback when it's ready 
				//loader.load('models/obj/banana.obj', addBananaInScene);
				for(var i = 0; i < fileList.length; i++) {
					loader.load(defaultPath + fileList[i] + '/' + fileList[i] + defaultFileFormat, addBananaInScene);
				}

			};

			var addBananaInScene = function(object) {
				banana = object;
				//Move the banana in the scene
				banana.rotation.x = Math.PI / 2;
				banana.position.y = -200;
				banana.position.z = 50;
				//Go through all children of the loaded object and search for a Mesh
				object.traverse(function(child) {
					//This allow us to check if the children is an instance of the Mesh constructor
					if(child instanceof THREE.Mesh) {
						child.material.color = new THREE.Color(0X00FF00);
						//Sometimes there are some vertex normals missing in the .obj files, ThreeJs will compute them
						child.geometry.computeVertexNormals();
					}
				});
				//Add the 3D object in the scene
				scene.add(banana);
				render();
			};

			var render = function() {
				requestAnimationFrame(render);

				//Turn the banana
				//banana.rotation.z += .01;

				renderer.render(scene, camera);
			};

			init();
		</script>
	</body>

</html>